<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>Go</title>
    <!-- 设置 viewport -->
    <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1" />
    <!-- IE -->
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <!-- 兼容国产浏览器的高速模式 -->
    <meta name="renderer" content="webkit">
    <style>
        body{
            font-family:'Microsoft Yahei','Simsun';
            color:#333;
        }
        input{
          outline: none;
        }
        html,body{
          width:100%;
          height: 100%;
          padding:0;
          margin:0;
        }
        .content_box{
          width: 100%;
          height: 100%;
          background: url(images/game1.png) 0 0 no-repeat;
          background-size: 100% 100%;
        }
        .mainTime{
          width: 80%;
          overflow:hidden;
          position: relative;
          top: 8%;
          left: 10%;
        }
        .timeBox{
          width: 100%;
        }
        .timeList{
          width: 80%;
          height: 30%;
          background: url(images/timeList.png) 0 0 no-repeat;
          background-size: 100% 100%;
          position: absolute;
          right: 17%;
          top: 26%;
          text-align: center;
          line-height: 115%;
        }


        .time{
          position: absolute;
          display:inline-block;
          top: 20px;
          right: 20px;
          color: #fff;
          font-size: 18px;
        }
        .moduleBox{
          width: 100%;
          height: 100%;
          position: fixed;
          top: 0;
          left: 0;
          background: rgba(0,0,0,0.5);
          display:none;
          z-index: 111111111;
        }
        .moduleMain{
          width: 75%;
          overflow:hidden;
          position: relative;
          top:50%;
          left: 50%;
          transform: translate(-50%,-50%);
        }
        .moduleImg{
          width: 100%;
        }
        .moduleHtml{
          width: 100%;
          position: absolute;
          left: 0;
          top: 45%;
        }
        .p1{
          width: 100%;
          text-align: center;
          font-size: 25px;
          color: #000;
          margin: 0;
        }
        .p2{
          width: 100%;
          text-align: center;
          font-size: 25px;
          color: #fff;
          margin: 0;
          margin-top: 15px;
        }
        .delete{
          position: absolute;
          top: 10px;
          right: 10px;
          width: 20px;
        }
        .rankList{
          margin-top: 3%;
          width: 100%;
          display: block;
          overflow: hidden;
          outline-style: none;
          text-align: center;
        }
        .rankList img{
          width: 60%;
        }
        .air{
          width: 16%;
          position: absolute;
          bottom: 10%;
          left: 42%;
        }
        .fuelBox{
           position: relative;
           left: 0;
           top: 0%;
           width: 100%;
           height: 80%;
           overflow: hidden;
        }
        .fuel1{
          width: 16%;
          position: absolute;
          top: 5%;
          left: 40%;
        }
        .fuel2{
          width: 11%;
          position: absolute;
          top: 15%;
          left: 10%;
        }
        .fuel3{
          width: 10%;
          position: absolute;
          top: 25%;
          left: 70%;
        }
        .sourceBox{
          position: relative;
          top: 8%;
          float: right;
          right: 10%;
          width: 25%;
          z-index: 11111111;
        }
        .sourceImg{
          width: 100%;
        }
        .sourceP{
          position: absolute;
          color: #fff;
          top: 25%;
          left: 20%;

        }

    </style>
</head>
<body>
 <div class="content_box" id="main">
  <div class="mainTime">
    <img src="images/timeBox.png" class="timeBox">
    <div class="timeList">60</div>
  </div>
  <!-- 容器 -->
  <div class="sourceBox">
    <img src="images/source.png" class="sourceImg">
    <span class="sourceP">120</span>
  </div>
  <!-- 燃料 -->
  <div class="fuelBox">
    <img src="images/fuel1.png" class="fuelImg fuel1">
    <img src="images/fuel2.png" class="fuelImg fuel2">
    <img src="images/fuel3.png" class="fuelImg fuel3">
  </div>
   <!-- 飞机 -->
   <img src="images/air.png" class="air">
   <!--  -->
   <p style="position: absolute;top:0;left: 0;width: 100%;color: #fff;" class="pclass"></p>
   <p style="position: absolute;top:50px;left: 0;width: 100%;color: #fff;" class="pclass2"></p>
 </div>
 <!-- 遮罩框 -->
 <div class="moduleBox">
   <div class="moduleMain">
     <img src="images/module.png" class="moduleImg">
     <div class="moduleHtml">
       <p class="p1">您的助燃数</p>
       <p class="p2">600L</p>
     </div>
     <a href="ranking.html" class="rankList"><img src="images/rankList.png"></a>
   </div>
   <img src="images/delete.png" class="delete">
 </div>
</body>
<script type="text/javascript" src="js/jquery1.7.2.js"></script>
<script type="text/javascript">
  $(function(){

        init();

        function init() {
            if (window && window.DeviceMotionEvent)
                window.addEventListener("devicemotion", motionHandler, false);
            if (window && window.DeviceOrientationEvent)
                window.addEventListener("deviceorientation", DeviceOrientationHandler, false);
        }

        function DeviceOrientationHandler(event){
        // alert("123");
          var alpha = event.alpha,beta = event.beta,gamma = event.gamma;
          if(alpha != null || beta != null || gamma != null){
            //各个方向旋转的值
               // alert(gamma)
               // var moveNum = 0.55*(gamma+90); //正常运行
               var moveNum = 0.7*(gamma+90);  //加速运行
               $(".air").css("left",moveNum+"%");
              if( gamma > 0 ){
                 // $(".pclass").html("左右："+alpha+"前后"+beta+"扭转"+gamma)
                 // $(".pclass").html("扭转"+gamma+"---"+moveNum);
               }else{
                // $(".pclass").html("左右："+alpha+"前后"+beta+"扭转"+gamma)
                 // $(".pclass").html("扭转"+gamma+"---"+moveNum)
               }


           }
       }
      function motionHandler(event) {
            // document.getElementById("interval").innerHTML = event.interval || 0; //上次收到通知的间隔
            // var acc = event.acceleration;
            // document.getElementById("x").innerHTML = acc.x || 0; //x轴加速度
            // document.getElementById("y").innerHTML = acc.y || 0; //y轴加速度
            // document.getElementById("z").innerHTML = acc.z || 0; //z轴加速度
            // var accGravity = event.accelerationIncludingGravity;
            // document.getElementById("xg").innerHTML = accGravity.x || 0; //x轴加速度
            // document.getElementById("yg").innerHTML = accGravity.y || 0;  //y轴加速度
            // document.getElementById("zg").innerHTML = accGravity.z || 0;   //z轴加速度

            var rotationRate = event.rotationRate;

            // document.getElementById("Ralpha").innerHTML = rotationRate.alpha || 0;  //左右旋转速度
            // document.getElementById("Rbeta").innerHTML = rotationRate.beta || 0;   //前后旋转速度
            // document.getElementById("Rgamma").innerHTML = rotationRate.gamma || 0;  //扭转速度
            // var r1 = rotationRate.alpha || 0;  //左右旋转速度
            // var r2 = rotationRate.gamma || 0;  //扭转速度
            // $(".pclass2").html("左右旋转速度"+r1+"---<br>"+"扭转速度"+r2)

            var r1 = rotationRate.alpha || 0;  //左右旋转速度
            var r2 = rotationRate.gamma || 0;  //扭转速度
            $(".pclass2").html("左右旋转速度"+r1+"---<br>"+"扭转速度"+r2)

        }




      // 删除模态框
    $(".delete").click(function(){
      $(".moduleBox").hide();
    });
    // 60秒倒计时
    var wait=60;
    var time = setInterval(function(){
       if (wait == 0) {
            clearInterval(time);
            //clearInterval(time1);
            $(".timeList").hide();
            $(".moduleBox").show();
            $(".fuelBox").hide();
            //$(".p2").html(meter*4.5+100+"L");
        } else {
            wait--;
            $(".timeList").html(wait);
            var timeW = 80*wait/60;
            //console.log(timeW);
            $(".timeList").css("width",timeW+"%")
        }
    },1000);


      //禁止下拉及默认滑动动作
      document.getElementById("main").addEventListener('touchmove',e,false);
      function e(event){
        event.preventDefault();
      }

      // 燃料移动
      function fuelMove(){
        $(".fuel1").animate({top:"100%"},18000,"linear",function(){
          $(this).remove();
        });
        // console.log(isOverlap("air","fuelImg"));
      }
      function fuelMove2(){
        $(".fuel2").animate({top:"100%"},18000,"linear",function(){
          $(this).remove();
        });
        //console.log(isOverlap("air","fuelImg"));
      }
      function fuelMove3(){
        $(".fuel3").animate({top:"100%"},18000,"linear",function(){
          $(this).remove();
        });
        //console.log(isOverlap("air","fuelImg"));
      }
      fuelMove();
      fuelMove2();
      fuelMove3();





      // 绑定deviceorientation事件和处理程序
      // if(window.DeviceOrientationEvent){
      //     window.addEventListener('deviceorientation',DeviceOrientationHandler,false);
      // }else{
      //     alert("您的浏览器不支持DeviceOrientation");
      // }



  })




</script>
</html>
